<template>
  <div class="pan-item" :style="{zIndex:zindex,heigth:height,width:width}">
    <div class="pan-info">
      <div class="pan-info-roles">
        <slot></slot>
      </div>
    </div>
    <div class="pan-thumb" :style="{backgroundImage:`url(${image})`}">
    </div>
  </div>
</template>

<script>
export default {
  name: 'PanThumb',
  props: {
    image: {
      type: String,
      require: true
    },
    zIndex: {
      type: Number,
      default: 1000
    },
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    }
  }

}
</script>

<style lang="scss" scoped>
.pan-item{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0, .2);
}
.pan-info{
  padding:20px;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
   box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
}

.pan-thumb{
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transform-origin:80% 10%;
  transition: all .3s ease-out;
  background-size: cover;
  background-position: center center;

}
.pan-item:hover .pan-thumb {
  transform: rotate(-110deg);
}
.pan-info{
  
}

</style>
